<script setup lang='ts' name="rights-management-add">
// import type { FormInstance, FormRules } from 'element-plus'

import { flowHttp } from '@fl/api/work-flow'
// import UpdatedOss from '@fl/components/upLoad-oss.vue'
import { ElCard } from 'element-plus'
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const router = useRouter()
const formdata = ref<any>({})
const route = useRoute()
formdata.value = route.query
console.log(`output->formdata`, formdata.value)
const form = ref<any>({ description: '', display_name: '', logo: '', logo2: [] })
const rowAssate = route.query ? route.query : ''
console.log(`route.query`, rowAssate)
// const rules = reactive<FormRules<any>>({
//     description: [
//         { message: '不能为空', required: true, trigger: 'blur' },
//     ],
//     display_name: [
//         { message: '不能为空', required: true, trigger: 'blur' },
//     ],
//     id: [
//         { message: '不能为空', required: true, trigger: 'blur' },
//     ],
// })
const tableData = ref([])
// const tableData = [
//     {
//         danj: '200元',
//         danw: '个',
//         shul: '1',
//         zicmc: '资产名称',
//     },
//     {
//         danj: '200元',
//         danw: '个',
//         shul: '1',
//         zicmc: '资产名称',
//     },
//     {
//         danj: '200元',
//         danw: '个',
//         shul: '1',
//         zicmc: '资产名称',
//     },
// ]
const formRef = ref()
function doSave() {
    console.log('审批')
}
function backHouseExamine() {
    router.push('/house-source-center/lease-approval/house-examine')
}
getAssetsData()
async function getAssetsData() {
    // gridOptions.loading = true
    flowHttp('childrenTable', {
        body: {
            data: {
                code: 'baddf5d42c',
                pageInfo: {
                    page: '1',
                    size: '20',
                },
                parentObjectID: rowAssate ? rowAssate.ObjectID : '',
            },
        },
    }).then((res: any) => {
        // gridOptions.loading = false
        console.log(res)

        res = res.data
        if (res.Code === 200) {
            const { Datas } = res.Result

            // gridOptions.pagerConfig.total = PagingInfo.DataCount
            tableData.value = Datas
        }

        // TODO：前端查询
        // const filterData = useQuery(data, seachData)
        // console.log('前端查询---', filterData)

        // 前端分页
        // const { list, total } = usePage(filterData, gridOptions)
    })
}
</script>

<template>
    <ElCard>
        <el-button mb-20
                   @click="backHouseExamine"
        >
            返回列表
        </el-button>

        <el-form ref="formRef"
                 :model="form"
                 label-width="auto"
        >
            <el-form-item label="户型基础信息"
                          prop=""
                          font-size-18
            />

            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="项目编号"
                                  prop="display_name"
                    >
                        <!-- <el-input v-model="form.display_name" /> -->

                        <div>{{ formdata.SequenceNo }}</div>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="户型名称"
                                  prop="description"
                    >
                        <!-- <el-input v-model="form.description" /> -->

                        <div>{{ formdata.huxmc }}</div>
                    </el-form-item>
                </el-col>

                <el-col :span="12">
                    <el-form-item label="上架审批状态"
                                  prop="description"
                    >
                        <!-- <el-input v-model="form.description" /> -->
                        <el-button v-if="formdata.shangjspzt === '通过'"
                                   style="color: #2ba471;border: 1px solid #2ba471;"
                                   size="small"
                        >
                            {{ formdata.shangjspzt }}
                        </el-button>

                        <el-button v-if="formdata.shangjspzt === '审批中'"
                                   style="color: #e9934f;border: 1px solid #e9934f;"
                                   size="small"
                        >
                            {{ formdata.shangjspzt }}
                        </el-button>

                        <el-button v-if="formdata.shangjspzt === '驳回'"
                                   style="color: #d54941;border: 1px solid #d54941;"
                                   size="small"
                        >
                            {{ formdata.shangjspzt }}
                        </el-button>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="所属项目"
                                  prop="description"
                    >
                        <!-- <el-input v-model="form.description" /> -->

                        <div>{{ formdata.xiangmmc }}</div>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item label="户型"
                                  prop="description"
                    >
                        <!-- <el-input v-model="form.description" /> -->

                        <div>{{ formdata.hux }}</div>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="装修情况"
                                  prop="description"
                    >
                        <!-- <el-input v-model="form.description" /> -->

                        <div>{{ formdata.zhuangxzk }}</div>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="房屋朝向"
                                  prop="description"
                    >
                        <!-- <el-input v-model="form.description" /> -->

                        <div>{{ formdata.fangjcx }}</div>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="租赁类型"
                                  prop="description"
                    >
                        <!-- <el-input v-model="form.description" /> -->

                        <div>{{ formdata.zullx }}</div>
                    </el-form-item>
                </el-col>

                <el-col :span="12">
                    <el-form-item label="可住人数"
                                  prop="description"
                    >
                        <!-- <el-input v-model="form.description" /> -->

                        <div>{{ formdata.kezrs }}</div>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="户型描述"
                                  prop="description"
                    >
                        <!-- <el-input v-model="form.description"
                                  :rows="2"
                                  type="textarea"
                        /> -->

                        <div>{{ formdata.huxms }}</div>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="户型特色"
                                  prop="description"
                    >
                        <!-- <el-input v-model="form.description"
                                  :rows="2"
                                  type="textarea"
                        /> -->

                        <div>
                            {{ formdata.huxts }}
                        </div>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="户型面积最小值"
                                  prop="description"
                    >
                        <!-- <el-input v-model="form.description" /> -->

                        <div>{{ formdata.shangphxzxmj }}</div>
                    </el-form-item>
                </el-col>

                <el-col :span="12">
                    <el-form-item label="户型面积最大值"
                                  prop="description"
                    >
                        <!-- <el-input v-model="form.description" /> -->

                        <div>{{ formdata.shangphxzdmj }}</div>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="户型原价格最小值"
                                  prop="description"
                    >
                        <!-- <el-input v-model="form.description" /> -->

                        <div>{{ formdata.shangphxzdzj }}</div>
                    </el-form-item>
                </el-col>

                <el-col :span="12">
                    <el-form-item label="户型原价格最大值"
                                  prop="description"
                    >
                        <!-- <el-input v-model="form.description" /> -->

                        <div>{{ formdata.shangphxzgzj }}</div>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="户型惠后价格最小值"
                                  prop="description"
                    >
                        <!-- <el-input v-model="form.description" /> -->

                        <div>{{ formdata.huxhhjgzxz }}</div>
                    </el-form-item>
                </el-col>

                <el-col :span="12">
                    <el-form-item label="户型惠后价格最大值"
                                  prop="description"
                    >
                        <!-- <el-input v-model="form.description" /> -->

                        <div>{{ formdata.huxhhjgzdz }}</div>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="户型主图片"
                                  prop="description"
                    >
                        <!-- <UpdatedOss v-model="form.logo" /> -->

                        <div v-for="(item, index) in form.huxztpurl"
                             :key="index"
                        >
                            <img :src="item"
                                 alt=""
                                 width="200px"
                                 height="200px"
                            >
                        </div>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="户型图片"
                                  prop="description"
                    >
                        <!-- <UpdatedOss :model="form.logo2"
                                    :file-list="form.logo2"
                        /> -->
                        <div v-for="(item, index) in form.huxtpurl"
                             :key="index"
                        >
                            <img :src="item"
                                 alt=""
                                 width="200px"
                                 height="200px"
                            >
                        </div>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="户型视频"
                                  prop="description"
                    >
                        <!-- <UpdatedOss :model="form.logo2"
                                    :file-list="form.logo2"
                        /> -->
                        <div v-for="(item, index) in form.luxwjurl"
                             :key="index"
                        >
                            <video controls
                                   :src="item"
                                   width="200px"
                                   height="200px"
                            />
                        </div>
                        <!-- <img :src="formdata.luxwjurl"
                             alt=""
                             width="200px"
                             height="200px"
                        > -->
                    </el-form-item>
                </el-col>
            </el-row>

            <el-form-item label="户型设置"
                          prop=""
                          font-size-18
            />

            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item label="卧室数量"
                                  prop="description"
                    >
                        <!-- <el-input v-model="form.description" /> -->

                        <div>{{ formdata.wossl }}</div>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="客厅(餐厅)数量"
                                  prop="description"
                    >
                        <!-- <el-input v-model="form.description" /> -->

                        <div>{{ formdata.ketsl }}</div>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="厨房数量"
                                  prop="description"
                    >
                        <!-- <el-input v-model="form.description" /> -->

                        <div>{{ formdata.chufsl }}</div>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item label="卫生间数量"
                                  prop="description"
                    >
                        <!-- <el-input v-model="form.description" /> -->

                        <div>{{ formdata.weisjsl }}</div>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                    <el-form-item label="阳台数量"
                                  prop="description"
                    >
                        <!-- <el-input v-model="form.description" /> -->

                        <div>{{ formdata.yangtsl }}</div>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-form-item label="户型资产单"
                          prop=""
                          font-size-18
            >
                <el-table :data="tableData"
                          style="width: 80%"
                          height="250"
                          :header-cell-style="{ textAlign: 'center' }"
                          :cell-style="{ textAlign: 'center' }"
                          :row-style="{ height: '40px' }"
                >
                    <el-table-column prop="zicmc"
                                     label="资产名称"
                    />

                    <el-table-column prop="shul"
                                     label="数量"
                    />

                    <el-table-column prop="danw"
                                     label="单位"
                    />

                    <el-table-column prop="danj"
                                     label="单价"
                    />
                </el-table>
            </el-form-item>

            <el-form-item>
                <div v-if="formdata.shangjspzt === '审批中'"
                     text-center
                     style="width: 100%;"
                >
                    <el-button type="primary"
                               @click="doSave"
                    >
                        审批
                    </el-button>

                    <el-button @click="backHouseExamine">
                        返回
                    </el-button>
                </div>
            </el-form-item>
        </el-form>
    </ElCard>
</template>

<style lang="scss" scoped>
:deep(.el-table td) {
    border-bottom: 1px solid #e5e6eb;
}

:deep(.el-table th) {
    border-bottom: 1px solid #e5e6eb;
}
</style>
